<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
    <meta charset="utf-8">
    <style media="screen">
    @import url(https://fonts.googleapis.com/css?family=Knewave);
    html, body {
      padding: 0;
      margin: 0;
      height: 100%;
      overflow: hidden;
    }
    #react-container {
      height: calc(100% - 2.5em);
      margin: 1em;
      border: 0.25em double orange;
      color: blue;
      border-radius: 0.5em;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: "Knewave", fantasy, Arial;
      font-size: 5em;
    }
    #react-container span {
      display: block;
      text-align: center;
      cursor: pointer;
      font-size: 0.5em;
    }
    #react-container span:last-child {
      color: grey;
      font-size: 0.5em;
    }

    </style>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flux/2.1.1/Flux.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/EventEmitter/5.0.0/EventEmitter.min.js"></script>
    <title>Flux</title>
</head>
<body>
<div id="react-container"></div>
  <script type="text/babel">

    //
    // Simple Flux Sample, with Facebook's Flux Dispatcher
    //

    const { Component } = React
    const { Dispatcher } = Flux

    /* View : React Countdown Component
    ************************************************************/

    const Countdown = ({count, tick, reset}) => {

    if (count) {
      setTimeout(() => tick(count), 1000)
    }

    return (count) ?
        <h1>{count}</h1> :
        <div onClick={() => reset(10)}>
            <span>CELEBRATE!!!</span>
            <span>(click to start over)</span>
        </div>

    }

    /* Action Creators : Create Action Objects
    ************************************************************/

    const countdownActions = dispatcher =>
    ({
      tick(count) {
        dispatcher.handleAction({
          type: 'TICK',
          count: count - 1
        })
      },
      reset(count) {
        dispatcher.handleAction({
          type: 'RESET',
          count
        })
      }
    })

    /* CountDispatcher : Dispatches actions for the Countodown
    ************************************************************/

    class CountdownDispatcher extends Dispatcher {

    handleAction(action) {
      console.log('dispatching action:', action)
      this.dispatch({
        source: 'VIEW_ACTION',
        action
      })
    }

    }

    /* The Store : Holds the Countdown Info
    ************************************************************/

    class CountdownStore extends EventEmitter {

    constructor(count=5, dispatcher) {
      super()
      this._count = count
      this.dispatcherIndex = dispatcher.register(this.dispatch.bind(this))
    }

    get count() {
      return this._count
    }

    dispatch(payload) {
      const { type, count } = payload.action
      switch(type) {

        case "TICK":
          this._count = count
          this.emit("TICK")
          return true

        case "RESET":
          this._count = count
          this.emit("RESET")
          return true

      }
    }

    }

    /* Flux App : Put it all together
    ************************************************************/
    const appDispatcher = new CountdownDispatcher()
    const actions = countdownActions(appDispatcher)
    const store = new CountdownStore(10, appDispatcher)

    const render = count => ReactDOM.render(
      <Countdown count={count} {...actions} />,
      document.getElementById('react-container')
    )

    store.on("TICK", ()=> render(store.count))
    store.on("RESET", ()=> render(store.count))
    render(store.count)

  </script>
</body>
</html>
